<template>
  <demoBlock title="表格行/列合并" padding>
    <vcu-table :columns="columns" :datas="data" bordered> </vcu-table>
  </demoBlock>
</template>

<script>
import { defineComponent, h } from "vue";

const data = [
  {
    key: "1",
    name: "王二",
    age: 32,
    address: "火星",
    tags: "漂亮的",
  },
  {
    key: "2",
    name: "张三",
    age: 22,
    address: "木星",
    tags: "终结者",
  },
  {
    key: "3",
    name: "李四",
    age: 42,
    address: "地球",
    tags: "失败者",
  },
  {
    key: "4",
    name: "王五",
    age: 32,
    address: "月亮",
    tags: "失败者",
  },
];

const renderContent = ({ text, index }) => {
  const obj = {
    children: text,
    props: {},
  };
  if (index == 1) {
    obj.props.colSpan = 0;
  }
  return obj;
};

export default defineComponent({
  setup() {
    const columns = [
      {
        title: "姓名",
        dataIndex: "name",
        key: "name",
        customRender: ({ text, index }) => {
          if (index == 1) {
            return {
              children: h("span", { class: "red-text" }, text),
              props: {
                colSpan: 4,
              },
            };
          }
          return h("span", { class: "blue-text" }, text);
        },
      },
      {
        title: "年龄",
        dataIndex: "age",
        key: "age",
        customRender: renderContent,
      },
      {
        title: "地址",
        dataIndex: "address",
        key: "address",
        customRender: renderContent,
      },
      {
        title: "标签",
        key: "tags",
        dataIndex: "tags",
        customRender: ({ text, index }) => {
          const obj = {
            children: text,
            props: {},
          };
          if (index == 1) {
            obj.props.colSpan = 0;
          }
          if (index == 2) {
            obj.props.rowSpan = 2;
          }
          if (index == 3) {
            obj.props.rowSpan = 0;
          }
          return obj;
        },
      },
    ];
    return {
      data,
      columns,
    };
  },
});
</script>
